import React, { Component } from 'react'
import Styles from "../style/floor.module.css"
import axios from "axios"
// var topS = document.documentElement.scrollTop || document.body.scrollTop

const styel1 = {
  'height': '2.5rem',
  'line-height': '2.5rem'
}
 class Floor extends Component {
   state = {
      arr:[],
      activeIndex:0
   }
   componentDidMount(){
      axios.get("list").then(res=>{
        console.log(res.data);
        this.setState({
          arr:res.data.list
        })
      })
      console.log(this.myRef.children);
      setTimeout(()=>{
        window.addEventListener('scroll', this.handleScroll, true);
      },100)
    
     
   }
   handleScroll=()=>{
     let topS=this.myRef.scrollTop ||this.myRef.scrollTop; // 右侧盒子滚动得距离
     console.dir(this.myRef.children)
    var arr = Array.from(this.myRef.children); // 伪数组转数组
    console.log(arr)
    arr.forEach((item,index)=>{
        // console.log(item.offsetTop)
        // item.offsetTop<topS+100
         console.log(topS)
         if(item.offsetTop>topS && item.offsetTop<topS+100){// 只让当前盒子对应得左侧高亮
            this.setState({
              activeIndex:index
            },()=>{ // render后执行得
              console.log(this.state.activeIndex);
            })
            
         }
       })
   }
   
   checkIndex(ind){
     console.log(ind)
      this.setState({
        activeIndex:ind
      })
      this.myRef.children[ind].scrollIntoView({behavior:"smooth"})
   }
  render() {
    let {arr} = this.state
    return (
      <div className={Styles.floor}>
          <div className={Styles.left}>
            {
                arr&&arr.length?arr.map((item,index)=>{
                  return <h3 key={index} style={styel1} onClick={this.checkIndex.bind(this,index)} className={this.state.activeIndex==index?Styles.active:""}>{item.title}</h3>
                }):""
            }
          </div>
          <div className={Styles.right} ref={(ref1)=>{this.myRef = ref1}}>
          {
                arr&&arr.length?arr.map((item,index)=>{
                  return (
                      <div key={index}>
                          <h3>{item.title}</h3>
                          <div className={Styles.right_box}></div>
                      </div>
                  )
                }):""
            }
          </div>
      </div>
    )
  }
}

export default Floor